<script setup lang="ts">
interface ResponseData {
  name: string
  age: number
}

const params1 = ref(1)
const params2 = ref(1)

// useFetch 组合式函数应在 setup 方法中调用或在生命周期钩子的函数顶层直接调用，否则你应使用 $fetch 方法
const { data, error, pending, status, refresh, clear } = useFetch<ResponseData>(
  '/api/user', 
  {
    key: '/api/user',
    method: 'GET',
    params: { id: params1.value }, // 传递参数
    watch: [params1, params2], // 监听 params1 的变化，当 params1 变化时，会重新执行请求
    // server: false结合 lazy 选项，这对于首次渲染不需要的数据（例如，非 SEO 敏感数据）非常有用
    // server: false, // 仅在客户端执行调用
    // lazy: true, // 懒加载，只有在调用 refresh 或 clear 时才会执行调用
    // immediate: false, // 立即执行调用，默认值为 true，设置为 false 后(server: false)，只有在调用 refresh 或 clear 时才会执行调用
    default: () => {
      return { name: 'default', age: 18 }
    },
    onRequest({ request, options }) {
      console.log('请求开始', request, options)
    },
    onRequestError({ request, options, error }) {
      console.log('请求错误', request, options, error)
    },
    onResponse({ request, response, options }) {
      console.log('请求成功', request, response, options)
    },
    onResponseError({ request, response, options, error }) {
      console.log('请求失败', request, response, options, error) 
    },
    transform(response) { // 转换响应数据
      return response
    }
  }
)

const cacheKey = '/cart/offers'
// const userId = ref(1)
// const cacheKey = computed(() => `user-${userId.value}`) // 使用计算属性作为 key
const { data: asyncData, error: asyncError, pending: asyncPending } = useAsyncData(cacheKey, async() => {
  const [coupons, offers] = await Promise.all([
    $fetch('/cart/coupons'),
    $fetch('/cart/offers')
  ])

  return { coupons, offers }
}, { default: () => { return { coupons: [], offers: [] } } })

const { x, y } = useMouse()

const { data: resData } =  await useRequest<ResponseData>('/app/banner/getbannerinfolist', {
  method: 'POST',
  // baseURL: 'https://api.aiiiin.com',
  baseURL: '/api',
  body: { 'BannerInfoQueryParams': { 'BannerInfoGroupType': 'homePageTool', 'ClientType': 0 } },
  // default: () => {
  //   return { name: 'default', age: 18 } as ResponseData
  // }
  onResponse({ request, response, options }) {
    console.log('useRequest请求成功', request, response, options)
  },
  onRequestError({ request, options, error }) {
    console.log('useRequest请求错误', request, options, error)
  }
  // immediate: true
  // watch: [x, y]
})
</script>

<template>
  <div>
    <h1>useMouse</h1>
    <p>x: {{ x }}, y: {{ y }}</p>
    <h1>useFetch:{{ status }}</h1>
    <UButton @click="() => { refresh() }">刷新</UButton>
    <UButton @click="() => { clear() }">清除</UButton>
    <pre v-if="pending">useFetch加载中...</pre>
    <pre v-else-if="error">{{ error }}</pre>
    <pre v-else>{{ data }}</pre>
    <h1>useAsyncData</h1>
    <pre v-if="asyncPending">useAsyncData加载中...</pre>
    <pre v-else-if="asyncError">{{ asyncError }}</pre>
    <pre v-else>{{ asyncData }}</pre>
    <!-- useRequest -->
    <div>useRequest:{{ resData }}</div>
  </div>
</template>

<style scoped>

</style>